<template>
    <div class="order_detail">
        <div class="base_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">申请退款
        </div>
        <div class="goods_info" v-for="deliveryOrder in orderDetail.deliveryOrders">
            <div class="order_title">
                <img src="../../assets/img/order/shop_icon.png" alt="">
                <router-link :to="{path:'/shop',query:{shopId:deliveryOrder.shopId}}">{{deliveryOrder.shopName}} >
                </router-link>
            </div>
            <div class="order_info" v-for="product in deliveryOrder.products">
                <router-link :to="{path:'/detail',query:{productId:product.productId}}">
                    <img :src="imageDomain+product.image" alt="">
                </router-link>
                <p class="p1">{{product.name}}<br><span class="gray f12">{{product.spec}}</span></p>
                <p class="p2"><span>￥{{product.price}}</span><br><span class="gray">X{{product.quantity}}</span></p>
            </div>
        </div>
        <div class="back_module mb1">
            货物状态 <span class="fr mr10">未收货</span>
        </div>
        <div class="back_module mb1" @click="chooseReason()">
            退款原因 <img class="arrow" src="../../assets/img/goods/arrow.png" alt=""><span class="fr mr10" v-if="reasonValue">{{reasonValue}}</span><span class="fr mr10" v-else>请选择</span>
        </div>
        <div class="back_module mb10 f12">
            请在退款说明处填写真实情况
        </div>
        <div class="back_module mb1">
            退款金额 <span class="blue ml10">￥{{orderDetail.payAmount}}</span>
        </div>
        <p class="p15">最多￥{{orderDetail.payAmount}}，含发货运费￥{{orderDetail.totalCarriage}}</p>
        <div class="back_module mb1">
            退款说明 <input v-model="remark" type="text" placeholder="选填">
        </div>
        <div @click="applyBack()" class="close_reason" style="position: fixed;bottom:0;width: 100%">
            确定
        </div>
        <!--退款原因-->
        <mt-popup v-model="reason" position="bottom" style="width: 100%">
            <mt-radio
                    align="right"
                    v-model="reasonValue"
                    :options="reasonOptions">
            </mt-radio>
            <div @click="closeReason()" class="close_reason">关闭</div>
        </mt-popup>
    </div>
</template>

<style>
    @import url("./order_detail.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'
    import {MessageBox} from 'mint-ui'
    import { Radio } from 'mint-ui';
    export default {
        data() {
            return {
                orderDetail: this.$route.query.goods,
                imageDomain: "",
                reasonOptions:[
                    {
                        label: '多拍/拍错/不想要',
                        value: '多拍/拍错/不想要',
                    },
                    {
                        label: '快递一致未送到',
                        value: '快递一致未送到'
                    },
                    {
                        label: '未按约定时间送货',
                        value: '未按约定时间送货'
                    },
                    {
                        label: '快递无跟踪记录',
                        value: '快递无跟踪记录'
                    },
                    {
                        label: '空包裹/少货',
                        value: '空包裹/少货'
                    },
                    {
                        label: '其他',
                        value: '其他'
                    }
                ],
                reason:false,
                reasonValue:'',
                remark:''
            }
        },
        created() {
             window.scrollTo(0,0);
        },
        mounted() {
            this.imageDomain = API.imageDomain;
        },
        methods: {
            goBack() {
                this.$router.goBack();
            },
            chooseReason(){
                this.reason = true
            },
            closeReason(){
                this.reason = false;
            },
            applyBack(){
                let url = API.serviceDomain + API.applyBack;
                let params = {'deliveryOrderCode':this.orderDetail.deliveryOrders[0].deliveryOrderCode,"reason":this.reasonValue,"refundType":"0",'remark':this.remark};
                this.$http.post(url,JSON.stringify(params)).then(
                    (res) => {
                        console.log(res);
                        if(res.body.status=='000000'){
                            this.$router.goBack();
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            }
        }
    }
</script>
